<template>
  <div id="app">
    <!-- <div class="userInfoContainer">
      <div class="imgDiv">
        <img src="../assets/logo.png" alt="">
      </div>
      <div class="data">
        <span class="date">庚子年 [鼠] 九月初九</span>
        <span>下午好, 小海</span>
      </div>
      <div class="weather">
        <span>22</span>
        <span>晴-空气质量优</span>
      </div>
    </div> -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in list" :key="item.id">
        <carlist :attrlist="item"></carlist>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import carlist from "./components/cardlist"
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';
Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
  name: 'App',
  components: {
    carlist
  },
  data(){
    return{
      list:[
        {
          id:1,
          name: '白银经理',
          logo:"引荐",
          lv:2
        },
        {
          id:2,
          name: '钻石主管',
          logo:"推荐",
          lv:4
        },
        {
          id:3,
          name: '星耀总监',
          logo:"指导",
          lv:5
        },
      ]
    }
  }
}
</script>

<style>
  .my-swipe .van-swipe-item {
    color: #fff;
  }
#app{
  width: 100%;
  height: 100%;
}
.userInfoContainer{
  font-size: 14px;
  color: #f7bb8d;
  height: 150px;
  display:flex;
  padding:20px ;
  background-color: rgb(27, 25, 25);
  justify-content:space-around;
}
.userInfoContainer img{
  border-radius: 50%;
  width: 50px;
  height: 50px;
}
.data{
  display:flex;
  flex-direction:column;

}
.weather{
  color:#fff;
  display: flex;
  flex-direction:column;
  text-align:center;
}
</style>
